<template>
  <view class="works-list" :style="worksStyle">
    <view class="works-item" @click="handleLinkToDetail(item)" v-for="item in worksList" :key="item.id">
      <image v-if="item.coverPicture" :src="item.coverPicture[0]?.filePath" mode="aspectFill"></image>
      <view v-else>no coverPicture</view>
      <view class="w-info">
        <view class="w-i-l">
          <view class="w-i-title">{{item.title}}</view>
          <view class="w-i-tag">
            <view v-for="tagItem in item.tagList" :key="tagItem.id">#{{tagItem.tagName}}</view>
          </view>
        </view>
        <view class="w-i-r" @click.stop="handleCheckWorks(item)">···</view>
      </view>
    </view>
    <Authorize ref="authorizeRef" />
  </view>
</template>

<script>
  import Authorize from '@/components/Authorize.vue'
  import {
    getPraiseStatusApi,
  } from '@/api/praise.js'
  import {
    executePariseActionSheet
  } from '@/utils/index.js'
  import {
    mapActions
  } from 'vuex'
  export default {
    props: {
      worksList: {
        type: Array,
        default () {
          return []
        }
      },
      worksStyle: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    components: {
      Authorize
    },
    methods: {
      ...mapActions(['setUserCollectInfo']),
      handleLinkToDetail(detailItem) {
        uni.navigateTo({
          url: `/pages/works/detail?id=${detailItem.id}`
        })
      },
      async handleCheckWorks(detailItem) {
        try {
          await this.$refs.authorizeRef.checkAuthorize()
          const openid = uni.getStorageSync('openid')
          const {
            code,
            data
          } = await getPraiseStatusApi({
            openId: openid,
            relationId: detailItem.id
          })
          if (code === '000000') {
            const params = {
              userOpenId: openid,
              relationId: detailItem.id,
              likesType: '作品'
            }
            executePariseActionSheet(data, params, () => {
              this.setUserCollectInfo()
            })
          }
        } catch (e) {
          console.log(e)
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .works-item {
    margin-bottom: 15rpx;

    image {
      width: 100%;
      height: 400rpx;
      border-radius: 5rpx;
    }

    .w-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;

      .w-i-l {
        .w-i-title {
          font-size: 34rpx;
        }

        .w-i-tag {
          padding-top: 10rpx;
          width: 100%;
          font-size: 28rpx;
          color: #969696;
          display: flex;
          gap: 10rpx;
          flex-wrap: wrap;
        }
      }
    }
  }
</style>
